<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar bg-white">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="28" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="28" color="#333333"></uni-icons>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar bg-white">
      <text class="text-lg font-medium">和光宴</text>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-area" scroll-y>
      <!-- 餐厅封面图 -->
      <view class="bg-white mb-3">
        <view class="relative">
          <image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&q=80" mode="aspectFill" class="w-full h-48"></image>
          <view class="absolute bottom-0 left-0 right-0 bg-gradient-to-t p-4">
            <text class="text-white text-xl font-bold block">欢迎光临和光宴</text>
            <text class="text-white opacity-80 text-sm block">精致粤式点心 • 传统粤式火锅</text>
          </view>
        </view>
      </view>
      
      <!-- 桌号信息 -->
      <view class="bg-white mx-4 rounded-xl p-4 shadow-sm mb-4">
        <view class="flex items-center mb-4">
          <view class="text-2xl mr-3 text-primary">
            <uni-icons type="shop-filled" size="24" color="#3db87f"></uni-icons>
          </view>
          <view>
            <text class="text-base font-medium block">您的座位</text>
            <text class="text-sm text-gray-500 block">8号桌 • 可容纳4-6人</text>
          </view>
        </view>
        <button class="w-full py-4 bg-primary text-white rounded-full font-medium flex items-center justify-center" @click="startDining">
          <uni-icons type="list" size="18" color="#FFFFFF" class="mr-3"></uni-icons>
          <text class="text-lg">开始点餐</text>
        </button>
      </view>
      
      <!-- 餐厅信息 -->
      <view class="info-card">
        <text class="text-base font-medium block mb-3">餐厅信息</text>
        <view class="info-item">
          <view class="info-icon">
            <uni-icons type="location-filled" size="18" color="#3db87f"></uni-icons>
          </view>
          <text class="text-sm text-gray-700">广州市天河区珠江新城XX路XX号</text>
        </view>
        <view class="info-item">
          <view class="info-icon">
            <uni-icons type="phone-filled" size="18" color="#3db87f"></uni-icons>
          </view>
          <text class="text-sm text-gray-700">020-12345678</text>
        </view>
        <view class="info-item">
          <view class="info-icon">
            <uni-icons type="calendar" size="18" color="#3db87f"></uni-icons>
          </view>
          <text class="text-sm text-gray-700">营业时间: 10:00 - 22:00</text>
        </view>
      </view>
      
      <!-- 今日推荐 -->
      <view class="bg-white mx-4 rounded-xl p-4 shadow-sm mb-4">
        <text class="text-base font-medium block mb-4">今日推荐</text>
        <view>
          <view class="flex py-3 items-center" @click="navigateTo('/pages/menu/detail')">
            <image src="https://p9-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/31e44832a9c645df913ec4299773a51a.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850158&x-signature=J52YknSQKiBo2bPtj6kedWUQkK8%3D" mode="aspectFill" class="w-16 h-16 rounded-lg mr-3"></image>
            <view class="flex-1">
              <text class="text-base font-medium block">北京烤鸭</text>
              <text class="text-xs text-gray-500 block">店长推荐 • 本周特惠</text>
            </view>
            <text class="text-primary font-medium">¥198</text>
          </view>
          
          <view class="border-t border-gray-100"></view>
          
          <view class="flex py-3 items-center" @click="navigateTo('/pages/menu/detail')">
            <image src="https://p26-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/38148bf503e7494cbf4a4e1c4115bc03.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850697&x-signature=ciyEP%2BdtyeM2IO6dhTfJUdxboyw%3D" mode="aspectFill" class="w-16 h-16 rounded-lg mr-3"></image>
            <view class="flex-1">
              <text class="text-base font-medium block">麻婆豆腐</text>
              <text class="text-xs text-gray-500 block">川菜代表 • 中辣</text>
            </view>
            <text class="text-primary font-medium">¥48</text>
          </view>
          
          <view class="border-t border-gray-100"></view>
          
          <view class="flex py-3 items-center" @click="navigateTo('/pages/menu/detail')">
            <image src="https://images.unsplash.com/photo-1563245372-f21724e3856d?w=500&q=80" mode="aspectFill" class="w-16 h-16 rounded-lg mr-3"></image>
            <view class="flex-1">
              <text class="text-base font-medium block">虾饺</text>
              <text class="text-xs text-gray-500 block">粤式点心 • 晶莹剔透</text>
            </view>
            <text class="text-primary font-medium">¥38</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    startDining() {
      uni.switchTab({
        url: '/pages/menu/index'
      });
    },
    navigateTo(url) {
      uni.navigateTo({
        url
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f7f7;
}

.status-bar {
  height: 44px;
  display: flex;
  align-items: center;
}

.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.content-area {
  flex: 1;
  overflow-y: auto;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-primary {
  background-color: #3db87f;
}

.text-primary {
  color: #3db87f;
}

.rounded-xl {
  border-radius: 12px;
}

.shadow-sm {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.info-card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin: 0 16px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-icon {
  width: 24px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.w-full {
  width: 100%;
}

.h-48 {
  height: 192px;
}

.w-16 {
  width: 64px;
}

.h-16 {
  height: 64px;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.p-4 {
  padding: 16px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3 {
  margin-right: 12px;
}

.text-xl {
  font-size: 20px;
}

.text-lg {
  font-size: 20px;
}

.text-base {
  font-size: 16px;
}

.text-sm {
  font-size: 14px;
}

.text-xs {
  font-size: 12px;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

.text-white {
  color: #FFFFFF;
}

.text-gray-500 {
  color: #6B7280;
}

.text-gray-700 {
  color: #374151;
}

.opacity-80 {
  opacity: 0.8;
}

.border-t {
  border-top-width: 1px;
}

.border-gray-100 {
  border-color: #F3F4F6;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.block {
  display: block;
}

.rounded-lg {
  border-radius: 8px;
}

.rounded-full {
  border-radius: 9999px;
}
</style>